<template>
<div>
	<div class="div_back" id="MemberIntroduction">
        <h1> MEET OUR TEAM</h1>
        <Menu mode="horizontal" :theme="theme1" active-name="1" @on-select="check">
            <MenuItem  name="2013"> 
                2013级
            </MenuItem>
            <MenuItem  name="2014">  
                2014级
            </MenuItem>
               <MenuItem  name="2015">
                2015级
            </MenuItem>
            <MenuItem  name="2016">
                2016级
            </MenuItem>
              <MenuItem  name="0">
                全体成员
            </MenuItem>
        </Menu>
        <div class="div_photo">
            <Row :gutter="24">
                <Col v-for="(item,index) in memberData" :key="index" span="4">
                    <div class="photoStyle">
                        <img @click="open()" class="position"  :src="item.photo">
                    </div>
                    <p style="font-size:18px; color:#F00">{{item.name}}</p>
                    <p>Web Team</p>
                </Col>
            </Row>
        </div>
        <Modal v-model="modal1" title="资料卡">
            <Row :gutter="24">
              <Col span="8">         
                    <img :src="memberData[1].photo"   style=" border-radius:10px 10px 10px 10px; height:150px ; width:100% " >
              </Col>
              <Col span="10">
                    <ul>
                        <li>姓名：{{memberData[0].name}}</li>
                        <li>毕业去向：{{memberData[0].work}}</li>
                        <li>联系方式：{{memberData[0].conect}}</li>
                    </ul>
              </Col>
              <Col span="4">
                    <ul>
                        <li>性别：{{memberData[0].sex}}</li>
                        
                    </ul>
              </Col>
            </Row>

         </Modal>
	</div>
</div>
</template>
<script type="text/javascript">
import {postDataToServer} from '../../assets/js/post.js'
	   export default {
        data () {
            return {
                modal1: false,
               
                theme1:'light',
                memberData1:[
                    {
                        name:'宋承恩',
                        id:1,
                        sex:"男",
                        grade:"2015",
                        conect:"1159733927@qq.com",
                        work:"阿里巴巴科技Xx公司",
                        photo:'../../../static/img/u=2827237766,3538697081&fm=27&gp=0.jpg',
                        class:"",
                        gowhere:"",
                        remark:'' 
                    },
                    {
                        name:'罗淦',
                        id:2,
                        photo:'../../../static/img/u=3066222416,2657768511&fm=27&gp=0.jpg'
                    },
                    {
                        name:'彭济',
                        id:1,
                        grade:"2016",
                        photo:'../../../static/img/u=3182507888,1332653733&fm=27&gp=0.jpg'
                    },
                    {
                        name:'张耕博',
                        id:2,
                        grade:"2016",
                        photo:'../../../static/img/u=3926928985,337488885&fm=27&gp=0.jpg'
                    },
                    {
                        name:'王云飞',
                        id:2,
                        grade:"2016",
                        photo:'../../../static/img/u=2827237766,3538697081&fm=27&gp=0.jpg'
                    },
                    {
                        name:'胡伦豪',
                        id:0,
                        grade:"2014",
                        photo:'../../../static/img/u=2827237766,3538697081&fm=27&gp=0.jpg'
                    }
                ],
                memberData:[
                    {
                        name:'宋承恩',
                        id:1,
                        grade:"2015",
                        sex:"男",
                        conect:"1159733927@qq.com",
                        work:"阿里巴巴科技Xx公司",
                        photo:'../../../static/img/u=2827237766,3538697081&fm=27&gp=0.jpg',
                        class:"",
                        gowhere:"",
                        remark:'' 
                    },
                    {
                        name:'罗淦',
                        id:2,
                        grade:"2016",
                        photo:'../../../static/img/u=3066222416,2657768511&fm=27&gp=0.jpg'
                    },
                    {
                        name:'彭济',
                        id:1,
                        grade:"2015",
                        photo:'../../../static/img/u=3182507888,1332653733&fm=27&gp=0.jpg'
                    },
                    {
                        name:'张耕博',
                        id:2,
                        photo:'../../../static/img/u=3926928985,337488885&fm=27&gp=0.jpg'
                    },
                    {
                        name:'王云飞',
                        id:2,
                        grade:"2016",
                        photo:'../../../static/img/u=2827237766,3538697081&fm=27&gp=0.jpg'
                    },
                    {
                        name:'胡伦豪',
                        id:0,
                        grade:"2014",
                        photo:'../../../static/img/u=2827237766,3538697081&fm=27&gp=0.jpg'
                    },
                    {
                        name:'XXX',
                        id:1,
                        photo:'../../../static/img/u=3066222416,2657768511&fm=27&gp=0.jpg'
                    },           
                    {
                        name:'宋承恩',
                        id:1,
                        photo:'../../../static/img/u=2827237766,3538697081&fm=27&gp=0.jpg'
                    },
                    {
                        name:'宋承恩',
                        id:1,
                        photo:'../../../static/img/u=2827237766,3538697081&fm=27&gp=0.jpg'
                    },
                ],
            }

        },
        created(){
            // this.loadPeopleData();
        },
        methods:{
            // check(n){
            //     console.log(n);
            //     this.memberData = [];
            //     for(var i=0;i<this.memberData1.lenth;i++){
            //         if (this.memberData1[i].grade == n ) {
            //             this.memberData.push(this.memberData1[i]);
            //         }

            //     }
            // },
            check(n){
                this.loadPeopleData(n);

            },
          loadPeopleData(n){
                let _this = this;
                let data = new Object();
                let parameter= new Object();
                data.url = "MEMBER_LISTALL";
                parameter.grade = n;
                data.parameter = parameter;
                postDataToServer(data).then((data)=>{
                    console.log(data);
                    if(data.status === 0){
                        _this.memberData1 = data.datalist;
                    }else{
                        _this.$message.error(data.message);
                    }
                })
            },
            open(){
        
               this.modal1 = true;
            },
        },
    }
</script>
<style scoped >

.div_back{
	height: 1000px;
	width: 100%;
	background-color: #f8f8f9; 
	background-size: 100% 100%;
}
.div_photo{
    margin:  40px;
    text-align: center;
}
.photoStyle{
    border-radius:25px 25px 25px 25px;
    height: 250px;
    margin:  20px;
    box-shadow:0px 0px  10px 5px #aaa;
}
.position{
    border-radius:25px 25px 25px 25px;
    height:250px ;
    width:100% ;

}
    @media screen and (max-width:1024px){
        .position{
            border-radius:25px 25px 25px 25px;
            height:150px ;
            width:100% ;
            
        }
        .photoStyle{
            border-radius:25px 25px 25px 25px;
            height: 150px;
            margin:  20px;
            box-shadow:0px 0px  10px 5px #aaa;
        }
    }
</style>